<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    body {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: black;
    }

    .container {
      margin: 0;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: black;
    }

    .sun {
      position: absolute;
      width: 10em;
      height: 10em;
      background-color: yellow;
      border-radius: 50%;
      box-shadow: 0 0 3em white;
    }

    .earth {
      position: absolute;
      width: 30em;
      height: 30em;
      border-radius: 50%;
    }

    .earth::before {
      content: "";
      position: absolute;
      width: 3em;
      height: 3em;
      background-color: dodgerblue;
      border-radius: 50%;
      top: 2.8em;
      right: 2.8em;
    }

    .moon {
      position: absolute;
      width: 8em;
      height: 8em;
      top: 0.3em;
      right: 0.3em;
    }

    .moon::before {
      content: "";
      position: absolute;
      width: 1.2em;
      height: 1.2em;
      background-color: white;
      border-radius: 50%;
      top: 0.8em;
      right: 0.2em;
    }

    .earth,
    .moon {
      position: absolute;
      width: calc(var(--diameter) * 1em);
      height: calc(var(--diameter) * 1em);
      border-radius: 50%;
    }

    .earth { --diameter: 30 }
    .moon { --diameter: 8; top: 0.3em; right: 0.3em }

    .earth::before,
    .moon::before {
      content: "";
      position: absolute;
      width: calc(var(--diameter) * 1em);
      height: calc(var(--diameter) * 1em);
      background-color: var(--color);
      border-radius: 50%;
      top: calc(var(--top) * 1em);
      right: calc(var(--right) * 1em);
    }
    
    .earth::before {--diameter: 3; --color: dodgerblue; --top: 2.8; --right: 2.8}
    .moon::before {--diameter: 1.2; --color: white; --top: 0.8; --right: 0.2}

    .earth,
    .moon {
      animation: orbit linear infinite;
      animation-duration: calc(var(--duration) * 1s);
    }

    @keyframes orbit {
      to {
        transform: rotate(1turn);
      }
    }

    .earth {--diameter: 30; --duration: 36.5}
    .moon {--diameter: 8; --duration: 2.7; top: 0.3em; right: 0.3em}
  </style>
</head>
<body>
  <figure class="container">
    <div class="sun"></div>
    <div class="earth">
      <div class="moon"></div>
    </div>
  </figure>
</body>
</html>